<template>
    <div class="wscn-http404-container">
        <div class="wscn-http404">
            <div class="pic-404">
                <img class="pic-404__parent" src="@/assets/404-images/404.png" alt="404">
            </div>
            <div class="text-404">
                <div class="text-404__oops">
                    404 未找到页面
                </div>
                <div class="text-404__headline">
                    请检查您输入的URL是否正确。
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
import { useAppStore } from '@/store/modules/app';
import { useSettingStore } from '@/store/modules/setting';
import { useUserStore } from '@/store/modules/user';
const settingStore = useSettingStore();
const userStore = useUserStore();
const appStore = useAppStore();
const router = useRouter();


const back = () => {
    router.back();
}
</script>
<style lang="scss" scoped>
.wscn-http404-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 150px;
}
.wscn-http404 {
    display: flex;
    justify-content: center;
    .pic-404 {
        float: left;
        width: 400px;
        overflow: hidden;

        &__parent {
            width: 100%;
        }
    }
    .text-404 {
        position: relative;
        float: left;
        width: 300px;
        padding: 30px 0;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        &__oops {
            font-size: 32px;
            font-weight: bold;
            line-height: 40px;
            color: #1482f0;
            opacity: 0;
            margin-bottom: 20px;
            animation-name: slideUp;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
        }
        &__headline {
            font-size: 20px;
            line-height: 24px;
            font-weight: bold;
            opacity: 0;
            margin-bottom: 10px;
            animation-name: slideUp;
            animation-duration: 0.5s;
            animation-delay: 0.1s;
            animation-fill-mode: forwards;
        }
        @keyframes slideUp {
            0% {
                transform: translateY(60px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }
    }
}
</style>
